<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>我的工作台</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>

    <link rel="stylesheet" th:href="@{/phone-bar/page.css}"></link>
    <script th:src="@{/phone-bar/ccPhoneBarSocket.js}"></script>
    <script>
        //所有的列表页默认显示100条记录;
        localStorage["bsTablePageSize"] = 100;
    </script>
</head>

<body class="gray-bg">

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />

    <form>
        <!-- 首页/工作台 -->
        <table width="1024">
            <tr>
                <td width="70%">
                    <div>
                        <div class="head_dial" style="padding-left: 10px; ">
                            <dl class="dial">
                                <dt>
                                    <label for="ccphoneNumber"></label><input type="text" name="ccphoneNumber" id="ccphoneNumber" placeholder="请输入电话号码" class="tel_txt" />
                                </dt>
                                <dd>
                                    <ul><li id="callStatus" title="" class="status4">没有连接</li></ul>
                                    <span id="showCallLen" style="display:none"><b>00:00</b></span>
                                </dd>
                            </dl>

                            <ul class="dial_btn">
                                <li><a href="#" id="setFree" class="xz_btn off"></a><span>置闲</span></li>
                                <li><a href="#" id="setBusy" class="sm_btn off"></a><span>忙碌</span></li>
                                <li><a href="#" id="callBtn" class="wh_btn"></a><span>外呼</span></li>
                                <li><a href="#" id="transferBtn" class="zjie_btn"></a><span>转接</span></li>
                                <li><a href="#" id="conferenceBtn" class="hy_btn"></a><span>会议</span></li>
                                <li><a href="#" id="hangUpBtn" class="gj_btn"></a><span>挂机</span></li>
                                <li><a href="#" id="resetStatus" class="qz_btn"></a><span>强置</span></li>
                                <li><a href="#" id="onLineBtn" class="sx_btn on"></a><span>签入</span></li>
                            </ul>
                        </div>
                    </div>
                </td>
                <td width="30%">
                    <div>
                        <div  style="padding-left: 10px; ">
                            &nbsp; &nbsp;  外呼设置：
                            <label for="videoCallBtn"> <input type="radio" value="video" name="callType" id="videoCallBtn" />视频外呼</label>  &nbsp;&nbsp;
                            <label for="audioCallBtn"> <input type="radio" value="audio"  name="callType" checked="checked" id="audioCallBtn"  />语音外呼</label>  <br />

                            &nbsp; &nbsp; 视频清晰度:
                            <label for="videoLevelSelect"></label><select id="videoLevelSelect">
                        </select>
                            <input type="button" id="reInviteVideoBtn" title="发送视频邀请，可把音频通话转换为视频通话。"
                                   onclick="_phoneBar.reInviteVideoCall();"       value="视频邀请" disabled="disabled" >

                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <label for="videoListSelect"></label>
                            <select id="videoListSelect">
                                <option value="">请选择视频</option>
                                <option value="/usr/local/freeswitchvideo/share/freeswitch/sounds/bank.mp4">客服实例视频</option>
                                <option value="/usr/local/freeswitchvideo/share/freeswitch/sounds/conference.mp4">多方会议视频</option>
                                <option value="/usr/local/freeswitchvideo/share/freeswitch/sounds/15-seconds.mp4">15-seconds-demo</option>

                            </select>
                            <input type="button" id="sendVideoFileBtn" title="推送视频给对方，以便结束当前通话。"
                                   onclick="_phoneBar.sendVideoFile($('#videoListSelect').val());"   value="推送视频" disabled="disabled" >

                        </div>
                    </div>
                </td>
            </tr>

            <tr id="conference_area" style="display: none">

                <td colspan="2" style="padding-left: 140px; padding-top: 30px;">
                    <div>
                        <div>
                            <div id="conference_start" style="display: block">
                                会议布局: &nbsp;
                                <select id="conf_layout" name="conf_layout">
                                    <option value="2x2">2x2</option>
                                    <option value="3x3">3x3</option>
                                    <option value="1up_top_left+3">一主三从</option>
                                </select>
                                &nbsp;
                                画布尺寸:
                                <select id="conf_template" name="conf_template">
                                    <option value="480p">480x640</option>
                                    <option value="720p">720x1080</option>
                                    <option value="default">default</option>
                                </select>
                                &nbsp;
                                会议类型:
                                <select id="conf_call_type" name="conf_call_type">
                                    <option value="video">视频</option>
                                    <option value="audio">音频</option>
                                </select>
                                &nbsp;
                                <input type="button" name="startConference" id="startConference"
                                       onclick="_phoneBar.conferenceStartBtnUI('张三')"
                                       style="width: 70px;" value="启动会议">
                                &nbsp;
                                <input type="button" name="endConference" id="endConference"
                                       onclick="_phoneBar.conferenceEnd()"
                                       disabled="disabled"
                                       style="width: 70px;" value="结束会议">
                            </div>

                            <div style="width: 100%;"> &nbsp; </div>

                            <div id="conference_member_list" style="display: none">
                                <ul>
                                    <li id="conference_header">
                                        <span class="conf_name"> <input id="member_name" name="member_name" placeholder="姓名" style="width: 60px;" /> </span> &nbsp;
                                        <span class="conf_phone"> <input id="member_phone" name="member_phone" placeholder="手机号" style="width: 110px;" /> </span> &nbsp;
                                        <span class="conf_call_type">
                                    <select id="member_call_type" name="member_call_type">
                                       <option value="video">视频</option>
                                       <option value="audio">音频</option>
                                   </select>
                                </span>
                                        <span class="conf_video_level">
                                    <select id="member_video_level" name="member_video_level">
                                   </select>
                                </span>

                                        <span class="conf_name">
                                   <input type="button" name="addConfMember" id="addConfMember"
                                          onclick="_phoneBar.conferenceAddMemberBtnUI(0)"
                                          style="width: 70px;" value="加入会议">
                               </span>
                                    </li>

                                    <!-- 会议成员展示模版html  -->
                                    <li id="conf_member_template"  style="display: none;">
                                        <span class="conf_name">{member_name}</span>
                                        <span class="conf_phone">{member_phone}</span>
                                        <span class="conf_mute"><a href="javascript:void(0)" onclick="_phoneBar.conferenceMuteMember('{member_phone}')"><img alt="禁言该成员。" th:src="@{/phone-bar/images/mute.jpg}" /> </a> </span>
                                        <span class="conf_vmute"><a href="javascript:void(0)" onclick="_phoneBar.conferenceVMuteMember('{member_phone}')"><img alt="关闭该成员的视频。" th:src="@{/phone-bar/images/video.jpg}" /> </a></span>
                                        <span class="conf_remove"><a href="javascript:void(0)" onclick="_phoneBar.conferenceRemoveMembers('{member_phone}')" title="踢除会议成员。">移除</a></span>
                                        <span class="conf_re_invite"><a href="javascript:void(0)" onclick="_phoneBar.conferenceAddMemberBtnUI(1, '{member_phone}', '{member_name}')" title="重新呼叫。">重呼</a></span>
                                        <span class="conf_status">{member_status}</span>
                                    </li>


                                    <li></li>
                                </ul>
                            </div>


                        </div>
                    </div>
                </td>

            </tr>

            <tr id="transfer_area" width="100%" style="display: none">

                <td colspan="2" width="100%" style="padding-left: 140px; padding-top: 30px;">
                    <table width="100%">
                        <tr>
                            <td width="90">业务组   </td>
                            <td width="90">坐席成员</td>
                            <td>&nbsp; </td>
                        </tr>
                        <tr>
                            <td>
                                <select size="10" id="transfer_to_groupIds" name="transfer_to_groupIds">
                                    <option value="">请选择</option>
                                </select>
                            </td>

                            <td>
                                <select size="10" id="transfer_to_member" name="transfer_to_member">
                                    <option value="">请选择</option>
                                </select>
                            </td>
                            <td valign="middle">
                                <input type="button" name="doTransferBtn" id="doTransferBtn"
                                       onclick="_phoneBar.transferBtnClickUI('张三')"
                                       style="width: 70px;" value="转接电话" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </form>


    <script th:inline="javascript">
        var _phoneBar = new ccPhoneBarSocket();
        var _scriptServer = window.location.host.split(":")[0];
        var _scriptPort = [[${callConfig.scriptPort}]];
        var _loginToken = [[${callConfig.loginToken}]];
        var _gatewayList = [[${callConfig.gatewayList}]];

        var _phoneNum = '';
        var _uuid = '';
        var _call_type = 2; // 1:呼入，2:外呼

        var manualDisConn = false;
        var reConnTimes = 0;

        var _callConfig = null;
        $(function() {
            // 调用函数填充视频清晰度的下拉列表
            populateVideoLevelDropdown('videoLevelSelect');
            populateVideoLevelDropdown('member_video_level');

            // websocket通信对象断开事件;
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.ws_disconnected.code, function(msg){
                console.log(msg, '连接断开');
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.ws_disconnected.code);
                $("#transfer_area").hide();

            });

            // 客户端请求参数错误事件
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.request_args_error.code, function(msg){
                console.log(msg, '客户端请求参数错误');
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.request_args_error.code);
            });

            //用户已在其他设备登录
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.user_login_on_other_device.code, function(msg){
                console.log(msg, "用户已在其他设备登录");
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.user_login_on_other_device.code);
                $.modal.msgWarning(ccPhoneBarSocket.eventListWithTextInfo.user_login_on_other_device.msg);
                manualDisConn = true; // 被挤掉线的也不自动重连
            });

            //websocket连接成功
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.ws_connected.code, function(msg){
                console.log(msg, "websocket连接成功");
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.ws_connected.code);
            });

            _phoneBar.on(ccPhoneBarSocket.eventList.caller_not_login, function (msg) {
                $.modal.msgError(msg["msg"]);
            });
            _phoneBar.on(ccPhoneBarSocket.eventList.outbound_finished, function (msg) {
                $.modal.msgError(msg["msg"]);
            });
            _phoneBar.on(ccPhoneBarSocket.eventList.server_error_audio_codec_not_match, function (msg) {
                $.modal.msgError(msg["msg"]);
            });
            _phoneBar.on(ccPhoneBarSocket.eventList.server_error, function (msg) {
                $.modal.msgError(msg["msg"]);
            });

            // 被叫振铃事件
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.callee_ringing.code, function(msg){
                console.log(msg.content, "被叫振铃事件");
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.callee_ringing.code);
            });

            // 呼入事件
            _phoneBar.on(ccPhoneBarSocket.eventList.new_inbound_call, function(msg){
                console.log(msg, "呼入" );
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.caller_answered.code);
                // 呼入弹屏
                $("#ccphoneNumber").val('10000');
                addCallRecord(_phoneNum, _uuid, 1);
            });

            // 主叫接通事件
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.caller_answered.code, function(msg){
                console.log(msg, "主叫接通" );
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.caller_answered.code);
                // 外呼弹屏
                var _phoneNum = $("#ccphoneNumber").val();
                var _uuid = msg.object.uuid;
                addCallRecord(_phoneNum, _uuid, 2);

            });

            // 主叫挂断事件
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.caller_hangup.code, function(msg){
                console.log(msg, "主叫挂断");
                $("#reInviteVideoBtn").attr("disabled","disabled");
                $("#sendVideoFileBtn").attr("disabled","disabled");
                $("#transfer_area").hide();
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.caller_hangup.code);
            });

            // 被叫接通事件
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.callee_answered.code, function(msg){
                console.log(msg, "被叫接通");
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.callee_answered.code);

                // // 外呼弹屏
                // var _phoneNum = $("#ccphoneNumber").val();
                // var _uuid = msg.object.uuid;
                // addCallRecord(_phoneNum, _uuid, 2);


            });

            // 被叫挂断事件
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.callee_hangup.code, function(msg){
                console.log(msg, "被叫挂断");
                $("#transfer_area").hide();
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.callee_hangup.code);
            });

            // 座席状态改变事件
            _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.status_changed.code, function(msg){
                console.log("座席状态改变: " ,msg);
                _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.status_changed.code);
            });

            // 音频通话已建立
            _phoneBar.on(ccPhoneBarSocket.eventList.on_audio_call_connected, function(msg){
                console.log("音频通话已建立: " ,msg);
                $("#reInviteVideoBtn").removeAttr("disabled");
            });

            // 视频通话已建立
            _phoneBar.on(ccPhoneBarSocket.eventList.on_video_call_connected, function(msg){
                console.log("视频通话已建立: " ,msg);
                $("#sendVideoFileBtn").removeAttr("disabled");
            });

            // 会议成员已经接通
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_ANSWERED, function (msg) {
                console.log("会议成员已经接通.", msg);
                var memberPhone = $.trim(msg.object.phone);
                var memberItemId = "#conf_member_" + memberPhone;

                $(".conf_status", $(memberItemId)).text(msg.object.status);
                $(".conf_status", $(memberItemId)).html("通话中").css("color", "green");

                $(".conf_mute", $(memberItemId)).find("img").show();
                $(".conf_vmute", $(memberItemId)).find("img").show();
            });

            // 会议成员已被禁用视频
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_VMUTED_SUCCESS, function (msg) {
                console.log("会议成员已被禁用视频.", msg);
                var memberPhone = $.trim(msg.object.phone);
                var muteObj = $(".conf_vmute", $("#conf_member_" + memberPhone));
                muteObj.find("img")[0].attr("th:src", "@{/phone-bar/images/no_video.jpg}");
                muteObj.find("a").removeAttr("onclick");
                muteObj.find("a").off("click");
                muteObj.find("a").on("click", function () {
                    _phoneBar.conferenceUnVMuteMember(memberPhone);
                } );
            });

            // 会议成员启用视频成功
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_UnVMUTED_SUCCESS, function (msg) {
                console.log("会议成员启用视频成功.", msg);
                var memberPhone = $.trim(msg.object.phone);
                var muteObj = $(".conf_vmute", $("#conf_member_" + memberPhone));
                muteObj.find("img")[0].attr("th:src", "@{/phone-bar/images/video.jpg}");
                muteObj.find("a").removeAttr("onclick");
                muteObj.find("a").off("click");
                muteObj.find("a").on("click", function () {
                    _phoneBar.conferenceVMuteMember(memberPhone);
                } );
            });

            // 会议成员已被禁言
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_MUTED_SUCCESS, function (msg) {
                console.log("会议成员已被禁言.", msg);
                var memberPhone = $.trim(msg.object.phone);
                var muteObj = $(".conf_mute", $("#conf_member_" + memberPhone));
                muteObj.find("img")[0].attr("th:src", "@{/phone-bar/images/unmute.jpg}");
                muteObj.find("a").removeAttr("onclick");
                muteObj.find("a").off("click");
                muteObj.find("a").on("click", function () {
                    _phoneBar.conferenceUnMuteMember(memberPhone);
                } );
            });

            // 会议成员解除禁言成功
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_UNMUTED_SUCCESS, function (msg) {
                console.log("会议成员解除禁言成功.", msg);
                var memberPhone = $.trim(msg.object.phone);
                var muteObj = $(".conf_mute", $("#conf_member_" + memberPhone));
                muteObj.find("img")[0].src = "../static/phone-bar/images/mute.jpg";
                muteObj.find("a").removeAttr("onclick");
                muteObj.find("a").off("click");
                muteObj.find("a").on("click", function () {
                    _phoneBar.conferenceMuteMember(memberPhone);
                } );
            });

            // 会议成员已经挂机
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_HANGUP, function (msg) {
                console.log("会议成员已经挂机.", msg);
                var memberPhone = $.trim(msg.object.phone);
                var memberItemId = "#conf_member_" + memberPhone;

                // 隐藏 mute及 vmute按钮
                $(".conf_mute", $(memberItemId)).find("img").hide();
                $(".conf_vmute", $(memberItemId)).find("img").hide();
                $(".conf_re_invite", $(memberItemId)).show();

                var answerStatus = ( msg.object.answeredTime === 0) ? "未接通" :  msg.object.hangupClause;
                var color = ( msg.object.answeredTime === 0) ? "red" : "green";
                $(".conf_status", $(memberItemId)).html("已挂机("+ answerStatus  +")").css("color", color);
                $(".conf_status", $(memberItemId)).fadeTo('fast', 0.1).fadeTo('fast', 1.0);
                var blinkText = setInterval(function () {
                    $(".conf_status", $(memberItemId)).fadeTo('fast', 0.1).fadeTo('fast', 1.0);
                }, 700); // 每0.5秒闪烁一次

                setTimeout(function () {
                    console.log("memberItemId=", memberItemId);
                    clearInterval(blinkText);
                    // $(memberItemId).remove(); //暂不自动移除参会者，由主持人手动操作处理;
                }, 5000);
            });

            // 电话会议开始，主持人已接通
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MODERATOR_ANSWERED, function (msg) {
                console.log("电话会议开始，主持人已接通.", msg);
                onConferenceStart();
            });

            // 电话会议结束，主持人已挂机
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MODERATOR_HANGUP, function (msg) {
                console.log("电话会议结束，主持人已挂机.", msg);
                onConferenceEnd();
            });

            // 成功把通话转接到多人视频会议
            _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_TRANSFER_SUCCESS_FROM_EXISTED_CALL, function (msg) {
                console.log("成功把通话转接到多人视频会议.", msg);
                onTransferToConferenceSuccess(msg);
            });

            // 订阅的坐席状态列表发生改变
            _phoneBar.on(ccPhoneBarSocket.eventList.agent_status_data_changed, function (msg) {
                console.log("agent_status_data_changed.");
                // 当 transfer_to_groupId 值改变时更新 transfer_to_member
                $(transferToGroupId).off("change");
                $(transferToGroupId).on("change", function () {
                    refreshMemberIdList();
                });
                refreshMemberIdList();
            });

            // 电话工具条参数配置;
            _callConfig = {
                'useDefaultUi' : true,
                // loginToken 信息是加密的字符串， 包含以下字段信息：extnum[分机号]、opnum[工号]、groupId[业务组]、skillLevel[技能等级]
                'loginToken': _loginToken,

                // 电话工具条服务器端的地址; 端口默认是1081
                'ipccServer': _scriptServer + ':' + _scriptPort,

                // 网关列表， 默认需要加密后在在通过客户端向呼叫系统传递;
                // 注意在注册模式下，网关参数更改之后，必须重启语音服务 [docker restart freeswitch] 方可生效，不支持热更新;
                // 支持多个网关同时使用，按照优先级依次使用, 支持网关负载容错溢出 [第一条网关外呼出错后，自动使用第二条网关重试，直至外呼不出错] ;
                'gatewayList' : _gatewayList,
                // 'gatewayList': [
                //     {
                //         uuid: '01',   // 网关唯一编号;
                //         updateTime: 1712611571863,  //网关信息更新时间, 每次修改必须更新这个字段，否则配置无法生效;
                //         gatewayAddr: '192.168.67.210:5090',  // 网关地址或名称，  如果是注册模式： 网关地址参数则填写为网关名称;
                //         callerNumber: '64901409',                 //主叫号码
                //         calleePrefix: '',                    // 被叫前缀
                //         priority: 2,                         //优先级，数字越小，越优先被使用;
                //         concurrency: 20,                    // 网关并发数，同时支持呼叫数;
                //         register: false,                     // 是否为注册模式
                //         audioCodec: 'g711'                   // 网关通信语音编码;
                //     } ,
                //     {
                //         uuid: '02',   // 网关唯一编号;
                //         updateTime: 1712611571863,  //网关信息更新时间, 每次修改必须更新这个字段，否则配置无法生效;
                //         gatewayAddr: '192.168.67.210:5092',  // 网关地址或名称，  如果是注册模式： 网关地址参数则填写为网关名称;
                //         callerNumber: '64901408',                 //主叫号码
                //         calleePrefix: '',                    // 被叫前缀
                //         priority: 1,                         //优先级，数字越小，越优先被使用;
                //         concurrency: 20,                    // 网关并发数，同时支持呼叫数;
                //         register: false,                     // 是否为注册模式
                //         audioCodec: 'g711'                   // 网关通信语音编码;
                //     }
                // ],

                // 网关列表信息是否为加密模式;
                'gatewayEncrypted': false
            };

            // 使用工具条之前需要先初始化 _callConfig 参数， 填充各个字段的值： 合计7个字段，必须填写正确 ；
            //********************************************************************************************
            // 以下代码设置加密的参数： loginToken、extPassword、gatewayList；   在本页面的demo演示中需要调用服务器端接口获取密文字符串;
            console.log(_callConfig);
            _phoneBar.initConfig(_callConfig);


            // 设置自动连接电话工具条
            setTimeout(function () {
                console.log(" 正在尝试连接电话工具条, 端口 1081 ");
                _phoneBar.connect();
            }, 1500);

        });

        function onConferenceEnd() {
            document.getElementById("endConference").setAttribute("disabled", "true");
            document.getElementById("startConference").removeAttribute("disabled");
            document.getElementById("conference_member_list").style.display = "none";
            // 启用外呼按钮
            $("#callBtn").addClass('on');
            // 启用置闲按钮
            $("#setFree").addClass('on');
            // 启用签出按钮
            $("#onLineBtn").addClass('on');
            //移除所有的参会成员
            $(".conf_member_item_row").remove();

            $("#callStatus").text("会议结束.");
        }

        function onConferenceStart() {
            document.getElementById("endConference").removeAttribute("disabled");
            document.getElementById("conference_member_list").style.display = "block";
            $("#callStatus").text("视频会议进行中...");
        }

        /**
         *  成功把电话转接到多人视频会议
         */
        function onTransferToConferenceSuccess(msg) {
            $("#callStatus").text("成转接到视频会议");
            $("#setFree").removeClass("on");
            $("#setBusy").removeClass("on");
            $("#callBtn").removeClass("on");

            //界面显示成功转接到视频会议电话
            var phone = msg.object.phone;
            var name = msg.object.name;
            _phoneBar.conferenceAddMemberFromExistCall(name, phone);
        }

        // 以下是通话转接操作界面的功能
        const transferToGroupId = document.getElementById("transfer_to_groupIds");
        const transferToMember = document.getElementById("transfer_to_member");

        // 填充 transfer_to_groupId 数据
        function populateGroupIdOptions() {
            transferToGroupId.length = 0; //清除所有选项
            let groups = _phoneBar.callConfig.groups;
            groups.forEach(group => {
                const option = document.createElement("option");
                option.value = group.groupId;
                option.textContent = group.bizGroupName;
                transferToGroupId.appendChild(option);
            });
            if(transferToGroupId.selectedIndex == -1){
                transferToGroupId.selectedIndex = 0;
            }
        };

        function refreshMemberIdList() {
            const selectedGroupId = transferToGroupId.value;
            if(selectedGroupId != "") {
                let origValue = transferToMember.value;
                populateMemberIdOptions(_phoneBar.callConfig.agentList, selectedGroupId);
                //判断原始选择项是否还存在，存在则重新赋值;
                let hasValue = transferToMember.querySelector(`option[value="${origValue}"]`) !== null;
                if(hasValue) {
                    transferToMember.value = origValue;
                }
            }
        }

        // 根据选中的 groupId 填充 transfer_to_member 数据
        function populateMemberIdOptions(members, selectedGroupId) {
            if (!Array.isArray(members)) {
                console.error("populateMemberOptions: members is not a Array.", members);
                return;
            }
            transferToMember.innerHTML = '<option value="">请选择</option>';
            members
                .filter(member => member.groupId === selectedGroupId)
                .forEach(member => {
                    const option = document.createElement("option");
                    const statusMap = { 1: "空闲", 2: "通话中", 3: "忙碌" };
                    option.value = member.opnum;
                    option.textContent = `${member.opnum}(${statusMap[member.agentStatus] || ""})`;
                    transferToMember.appendChild(option);
                });
        };

        // 将视频级别填充到下拉列表中的函数
        function populateVideoLevelDropdown(objId) {
            let select = document.getElementById(objId);
            if(select == null) return;
            // 遍历视频级别数据
            for (let key in ccPhoneBarSocket.videoLevels) {
                if (ccPhoneBarSocket.videoLevels.hasOwnProperty(key)) {
                    let level = ccPhoneBarSocket.videoLevels[key];
                    let option = document.createElement('option');
                    option.value = level.levelId; // 设置值为 levelId
                    option.text = level.description; // 显示文本
                    select.appendChild(option);
                }
            }
            select.value = ccPhoneBarSocket.videoLevels.HD.levelId ;
        }

        function addCallRecord(phoneNum, uuid, call_type) {
            _phoneNum = phoneNum;
            _uuid = uuid;
            _call_type = call_type;
            var modealName = '外呼弹屏';
            if (_call_type == 1) {
                modealName = '呼入弹屏';
            }
            var url = ctx + "cc/custcallrecord/add?phoneNum=" + _phoneNum + "&callType=" + _call_type + "&uuid=" + _uuid;
            $.modal.open(modealName, url);
        }

        $('#onLineBtn').on('click', function () {
            if ($(this).hasClass('on')) {
                if (_phoneBar.getIsConnected()) {
                    manualDisConn = true
                    console.log("手动断开连接！")
                } else {
                    manualDisConn = false
                    console.log("手动建立连接！")
                }
            }
        });
    </script>
</body>
</html>
